<template>
    <view class="body zt_qj bj_zhu">
		<view class="status_bar"></view>
		<view class="status_bar_fixed"></view>
		<view v-if="top>0" :style="'height: '+(top+10)+'px;'"></view>
		<view v-if="top>0" class="BarTitle" :style="'padding-top:'+top+'px'">追剧</view>
        <view v-if="!load" class="content">
            <!-- 签到 -->
            <view class="signbox">
                <view class="sign_conent">
                    <view class="sign_conent_title">你已连续签到<span>{{user.qdnum}}</span>天</view>
                    <view class="sign_sub">签到领{{user.cion_name}}，新剧抢先看。连续签到7天领惊喜礼包</view>
                    <view class="sign_list">
                        <view class="li" :class="{on:day<=user.qdnum}" v-for="(cion,day,index) in signlist" :key="index">
                            <view class="libox">
                                <view class="scroll_xian"></view>
                                <view class="shuju">
                                    <view class="unmbox">{{cion}}</view>
                                    <view class="item">{{day>user.qdnum?'第'+day+'天':'已签'}}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="qdbtn on" v-if="user.is_signin">今日已签到</view>
                    <view class="qdbtn" @click="get_signin()" v-else>立即签到</view>
                </view>
            </view>
            <!-- 短剧列表模块 -->
            <view class="indexlistbox">
                <view class="title">
                    <view class="h2">播放记录</view>
                    <view class="more" @click="get_link('user/history')">更多</view>
                </view>
				<view class="nodata" v-if="playlist.length==0">
					<view class="img"><image src="../static/img/queshengtu/meiyoushuju.png" mode="widthFix"></image></view>
					<view class="name">没有任何数据</view>
				</view>
                <view class="list" v-else>
                    <view v-for="(item,index) in playlist" :key="index" class="li" @click="get_play_url(item.id)">
                        <view class="kzdk">
                            <view class="imgbox">
                                <view class="img"><image :src="item.pic" mode="aspectFill"></image></view>
                            </view>
                            <view class="name">{{item.name}}</view>
                        </view>
                    </view>
                </view>
                <view class="title">
                    <view class="h2">追剧记录</view>
                    <view class="more" @click="get_link('user/collect')">更多</view>
                </view>
				<view class="nodata" v-if="favlist.length==0">
					<view class="img"><image src="../static/img/queshengtu/meiyoushuju.png" mode="widthFix"></image></view>
					<view class="name">没有任何数据</view>
				</view>
                <view class="list2" v-else>
                    <view v-for="(item,index) in favlist" :key="index" class="li" @click="get_play_url(item.id)">
                        <view class="img"><image :src="item.pic" mode="aspectFill"></image></view>
                        <view class="neirong">
                            <view class="name">{{item.name}}</view>
                            <view class="read">看到第{{item.xid}}集</view>
                            <view class="state">更新至第{{item.news_xid}}集</view>
                        </view>
                        <view class="btn" @click="get_link('play?id='+item.id+'&jid='+item.jid)">继续观看</view>
                    </view>
                </view>
            </view>
        </view>
		<loading :load="true" v-else></loading>
    </view>
</template>

<script>
    let that = null;
    export default {
        data() {
            return {
				top: 0,
				load: true,
				user: {},
				playlist: [],
                signlist: {},
                favlist:[]
            }
        },
        onLoad() {
            that = this;
			// #ifdef MP-WEIXIN
			that.top = uni.getMenuButtonBoundingClientRect().top;
			// #endif
			// #ifdef APP-PLUS
			that.top = uni.getSystemInfoSync().statusBarHeight;
			// #endif
			uni.setNavigationBarTitle({title: '追剧'});
        },
        onShow() {
			that.get_data();
		},
		onPullDownRefresh() {
			that.get_data();
		},
        methods: {
			get_play_url(id){
				let url = 'play?id='+id;
				// #ifdef APP-PLUS
					url = 'aplay?id='+id;
				// #endif
				that.get_link(url);
			},
			get_link(url){
				uni.navigateTo({
					url: '../pages/'+url
				});
			},
			get_data(){
				that.http.get_curl('cases/index',{},function(res){
					that.load = false;
					uni.stopPullDownRefresh(); //停止下拉样式
					if(res.code == 1){
						that.user = res.data.user;
						that.signlist = res.data.signlist;
						that.playlist = res.data.playlist;
						that.favlist = res.data.favlist;
					}
				});
			},
			get_signin(){
				that.http.get_curl('cases/signin',{},function(res){
					if(res.code == 1){
						uni.showToast({title: res.msg,icon:'none'});
						that.user.is_signin = true;
						that.get_data();
					}
				});
			}
        }
    }
</script>

<style lang="scss">
	.body{padding-bottom: 10rpx;}
	.BarTitle{width: 100%;line-height: 40px;text-align: center;font-size: 16px;font-weight: 500;background: #fff;position: fixed;top:0;left:0;z-index: 99;}
    // 签到
    .signbox{width: 100%;display: flex;justify-content: center;margin-top: 30rpx;
        .sign_conent{width: calc(100% - 64rpx);padding: 0px;box-sizing: border-box;
            .sign_conent_title{width: 100%;font-size: 36rpx;font-weight: 700;color: #333;
                span{color: #ff6526;}
            }
            .sign_sub{color: rgb(153, 153, 153);font-size: 24rpx;margin-top:20rpx;}
            .sign_list{width: 100%;padding: 30rpx 0;box-sizing: border-box;display: flex;white-space: nowrap;
                .li{display: inline-block;width: 15.25%;
                    .libox{display: flex;
                        .shuju{z-index:9;
                            .unmbox{width: 60rpx;height: 60rpx;border: 4rpx solid #bfbfbf;box-sizing: border-box;border-radius: 50%;font-size: 24rpx;color: #bfbfbf;text-align: center;line-height: 50rpx;}
                            .item{width: 60rpx;text-align: center;font-size: 24rpx;padding-top: 10rpx;color: #333;}
                        }
                        .scroll_xian{width: 100%;height: 4rpx;background: #bfbfbf;margin-top: 30rpx;z-index:8;}
                    }
                }
                .li:nth-child(1){width: 8.5%;}
                .li:nth-child(1) .libox .scroll_xian{display: none;}
                .li.on .libox .shuju .unmbox{border: 4rpx solid #ff6526;color: #fff;background: #ff6526;}
                .li.on .libox .scroll_xian{background: #ff6526;}
                .li.on .libox .shuju .item{color: #999;}
            }
            .qdbtn{width: 100%;border-radius: 44rpx;background: linear-gradient(270deg,#fcae3a,#f15d25);color: #fff;text-align: center;padding: 22rpx 0;font-size: 32rpx;}
			.qdbtn.on{background:#ccc;}
		}
    }
    /* 短剧模块 */
    .indexlistbox{width: calc(100% - 32px);margin: 0 auto;margin-top: 32rpx;padding-bottom: 32rpx;box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20rpx 0px;border-radius:20rpx;margin-bottom: 32rpx;padding-top:20rpx;
        .title{padding: 0 20rpx;height: 60rpx;position: relative;
            .h2{font-size: 32rpx;font-weight: 600;display: inline-block;vertical-align: middle;line-height: 60rpx;}
            .more{font-size: 28rpx;color: #999;line-height: 60rpx;position: absolute;top: 0;right: 20rpx;}
        }
		.nodata{
			margin: 30px auto;width: 100px;
		}
        // 模块1
        .list{padding: 0 20rpx;display: flex;justify-content: flex-start;flex-wrap:wrap;
            .li{width: calc(33.333% - 23rpx);background: #fff;position: relative;border-radius: 16rpx;overflow: hidden;margin:20rpx 0;margin-right: 32rpx;cursor: pointer;box-shadow: 0px 4rpx 32rpx 0px rgba(0,0,0,.04);
                .kzdk{width: 100%;display: block;
                    .imgbox{position: relative;width: 100%;padding-bottom: 120%;background: #f2f2f2;
                        .img{width: 100%;height: 100%;margin: 0 auto;position: absolute;overflow: hidden;
                            image{width: 100%;height: 100%;object-fit: cover;}
                        }
                    }
                    .name{padding: 0 10rpx;font-size: 28rpx;font-weight: 400;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 60rpx;text-align: center;}
                }
            }
            .li:nth-child(3n){margin-right: 0;}
        }
        // 模块2
        .list2{padding: 0 20rpx;
            .li{width: 100%;position: relative;margin-top: 32rpx;
                .img{width: 156rpx;height:200rpx;border-radius: 16rpx;background: #f2f2f2;overflow: hidden;position: absolute;top: 0;left: 0;
                    image{width: 100%;height: 100%;object-fit: cover;}
                }
                .neirong{padding-left: 176rpx;height:200rpx;
                    .name{font-size: 32rpx;font-weight: 600;color: #2e2f33;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
                    .read{font-size: 28rpx;color: #f60;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-top: 32rpx;}
                    .state{font-size: 28rpx;color: #999;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-top: 32rpx;}
                }
                .btn{width:200rpx;height: 56rpx;background: linear-gradient(270deg, #fcae3a, #f15d25);color: #fff;text-align: center;line-height: 56rpx;border-radius: 56rpx;position: absolute;bottom: 0;right: 0;}
            }
            .li:nth-child(1){margin-top:20rpx;}
        }
    }
</style>